<template>
  <div class="first">
    <span>【题型】 ： {{ question(list.questionType) }}</span>
    <span>【编号】 ： {{ list.id }}</span>
    <span>【难度】 ： {{ difficultyFn(list.difficulty) }}</span>
    <span>【标签】 ： {{ list.tags }}</span>
  </div>
  <div class="second">
    <div class="third">
      <span>【学科】 ： {{ list.subjectName }}</span>
      <span>【目录】 ： {{ list.directoryName }}</span>
    </div>
    <div>
      <span>【方向】 ： {{ list.direction }}</span>
    </div>

  </div>
  <hr>
  <div>【题干】 ： <span v-html="list.question" style="color:blue"></span></div>
  <!-- 题 -->
  <div v-if="list.questionType === '1'">
    <p>单选题 选项：（以下选中的选项为正确答案）</p>
    <el-radio-group v-model="radioData" class="ml-4" fill="#409eff">
      <div class="box">
        <el-radio :label="item.isRight" size="large" v-for="item in list.options" :key="item.id" >
          {{ item.code }}:{{ item.title }}</el-radio>
      </div>
    </el-radio-group>
  </div>
  <div v-else-if="list.questionType === '2'">
    <p>多选题 选项：（以下选中的选项为正确答案）</p>
    <el-checkbox-group v-model="checkState" text-color="#409eff">
      <el-checkbox :label="item.isRight" v-for="item in list.options" :key="item.id"> {{ item.title }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
  <div v-else></div>
  <!-- <div>单选题 选项：（以下选中的选项为正确答案）</div>
  <div><input type="radio"><span>不知道</span></div>
  <div><input type="radio"><span>语法正确</span></div>
  <div><input type="radio"><span>语法错误</span></div>
  <div><input type="radio"><span>不确定</span></div> -->
  <hr>
  <div><span>【参考答案】 ： </span>
    <el-button type="danger" @click="videoVi = !videoVi">视频答案预览</el-button>
    <br>
    <video :src="list.videoURL"  v-show="videoVi" controls width="320" height="240"></video>
  </div>
  <hr>
  <div><span v-html="'【答案解析】 ： ' + list.answer"></span></div>
  <hr>
  <div><span>【题目备注】 ： {{ list.remarks }}</span></div>
</template>

<script>
import { question, difficultyFn, chkStateFn, publishStateFn } from '@/module-hmmm/components/questionsComponents/hooks/index.js'
import { ref } from 'vue'
export default {
  name: 'BulletFrame',
  props: {
    centerDialogVisible: {
      type: Boolean,
      required: true
    },
    list: {
      type: Object,
      required: true
    }
  },
  setup (props, { emit }) {
    // console.log(props.list)
    const radioData = ref(1)
    const videoVi = ref(false)
    return {
      question,
      difficultyFn,
      radioData,
      videoVi
    }
  }
}
</script>

<style scoped lang="scss">
.first {
  display: flex;
  padding: 7px 0;

  span {
    flex: 1;
  }
}

.second {
  display: flex;
  padding: 7px 0;

  div {
    flex: 1;
  }
}

.third {
  display: flex;

  span {
    flex: 1;
  }
}

.box {
  display: flex;
  flex-direction: column;
}
</style>
